<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<style type="text/css">
body {
    font-family: "Arial", Helvetica, sans-serif;
    background-color: #000000; 
    color:#ffffff; 
}
/* Bright links that only underline when tracked */
a:link      { color:#00ffff; text-decoration: none; }
a:visited   { color:#00ffff; text-decoration: none; }
a:hover     { color:#00ffff; text-decoration: underline; }
a:active    { color:#20ffff; text-decoration: none; }
.image_viewer {
    left:0px;
    top:0px;
    width:100%;
    height:auto;
}
img.image_box {
    left:0px;
    top:0px;
    width:100%;
    height:auto;
}
.rot0 {
}
.rot180 {
    -ms-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
#title {
    width:100%;
    color:#e0e0e0;
    font-size:40px;
    white-space:nowrap;
    text-align:center;
}
.folder_entry {
    color:#00c0c0;
    font-size:30px;
    white-space:nowrap;
}
.folder_icon {
    display: inline-block;
    background: url() no-repeat;
    height:32px;
    width:32px;
}
.info_text {
  color: #808080;
  font-size: 10px;
  text-align:center;
  clear:both
}
</style>
<title>TITLE_TEXT</title>
<script type="text/javascript">
    var original_title = "Images In TITLE_TEXT";
    var rotation;
    var new_wide;
    var new_high;
    function showme(image_path,rot,wide,high)
    {
        var title = document.getElementById("title");
        title.innerHTML = image_path;
        var viewer = document.getElementById("viewer");
        rotation = rot;
        window.onresize=redraw;
        last_scroll = 
        redraw();
        function redraw()
        {
            if( 90 == rot || 270 == rot )
            {
                new_wide = window.innerWidth-32;
                new_high = Math.floor(new_wide * wide / high);
                // Set up canvas, start loading the image, un-rotate from EXIF camera details
                // Layout is borked on EVERY browser if I use CSS to rotate
                viewer.innerHTML = '<a class="image_box" href="" onclick="javascript: hideme(); return false;"><canvas id="canvas" width="'+new_wide+'" height="'+new_high+'"/></a><img id="showthis" style="visibility:hidden;" src="'+image_path+'" onload="image_loaded_rot();" />';
                viewer.style.width = new_wide+'px';
                viewer.style.height = new_high+'px';
                //image_loaded_rot();
                var image = document.getElementById("showthis");
                if( image.complete )
                    image_loaded_rot();
            }
            else
            {   // Rotate it with css; right side up, or upside-down
                viewer.innerHTML = '<div class="rot'+rot+'"></div>';
                var innerImg = '<a href="" class="image_box" onclick="javascript: hideme(); return false;"><img class="image_box" src="' + image_path + '" /></a>';
                viewer.firstChild.innerHTML = innerImg;
                viewer.style.width = '100%';
                viewer.style.height = 'auto';
            }
        }
        // Now that we've made a lot of changes, show what we did
        setTimeout( function() { window.scrollTo(0,0); }, 33 );
    }
    function image_loaded_rot()
    {   
        var image = document.getElementById("showthis");
        if(!image.complete)
        {   // Poll-ish load check, because 'onLoad/onload' not reliably working...
            setTimeout(image_loaded_rot,33);
        }
        
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.save();
        if( 90 == rotation )
        {
            context.translate(new_wide, 0);
            context.rotate(rotation*Math.PI/180);
            context.drawImage(image, 0,0, new_high,new_wide);
        }
        else
        {
            context.translate(0, new_high);
            context.rotate(rotation*Math.PI/180);
            context.drawImage(image, 0,0, new_high,new_wide);
        }
        context.restore();
    }
    function hideme()
    {
        var title = document.getElementById("title");
        title.innerHTML = original_title;
        
        var viewer = document.getElementById("viewer");
        viewer.innerHTML = "";
        viewer.style.height = '0px';
        window.onresize=null;
    }
</script>
</head>
<body>
<div id="viewer" class="image_viewer" ></div>
<div id="title" >Images In TITLE_TEXT</div>
<p/>

<div id="indexes">
<!--FOLDERS_HERE-->
</div>

<!-- ~~~~~ COPY+PASTE CODE BEGIN HERE. ~~~~~ -->

<div style="background-color:#000000; text-align:center;" id="thumbnails" >
<!--THUMBNAILS_HERE-->
</div>

<!-- ~~~~~ COPY+PASTE CODE ENDS HERE. ~~~~~ -->

<div class="info_text">
<p/>
<a href="https://code.google.com/p/videowebscript/wiki/AIRContactSheet">Generated by ContactSheet</a>
<p/>
</div>
</body>
</html>
